<template>
  <el-steps
    :space="200"
    :active="activeIndex"
    finish-status="success"
  >

    <template v-if="isCancel">

      <el-step :title="$CONST.ORDER_STATUS.CREATE.title"></el-step>

      <el-step status="success" :title="$CONST.TASK_STATUS.CANCEL.title"></el-step>
    </template>
    <template v-else>
      <el-step
        :key="item.name"
        v-for="item in $CONST.TASK_STATUS"
        :title="item.title"
      ></el-step>
    </template>
  </el-steps>
</template>

<script>
export default {
  props: {
    taskStatus: Object,
    default: () => this.$CONST.TASK_STATUS.NEW
  },
  computed: {
    isCancel () {
      return this.taskStatus && this.taskStatus.name === this.$CONST.TASK_STATUS.CANCEL.name
    },
    activeIndex () {
      if (this.isCancel) {
        return 1
      } else {
        return Object.values(this.$CONST.TASK_STATUS).findIndex(item => this.taskStatus.name === item.name) + 1
      }
    }
  }
}
</script>

<style>
</style>
